<template>
  <div>
    <Tabs type="card" v-model="tabValue" @on-click="clickTabs">
      <TabPane label="运营中心" name="tab1">
        <Card style="width: 100%;float: left">
          <div style="width: 50%;float: left">
            <access-equipment-sum-bar-echart :width="echartWidth1" :height="400" ref="accessEquipmentSumBarEchart"></access-equipment-sum-bar-echart>
          </div>
          <div style="width: 50%;float: left">
            <vxe-table
              style="margin-top: 95px"
              align="center"
              :data="echarData1">
              <vxe-table-column field="region" title="设备类型"></vxe-table-column>
              <vxe-table-column field="num" title="接入总数"></vxe-table-column>
              <vxe-table-column field="onlinenum" title="在线数量"></vxe-table-column>
              <vxe-table-column field="offlinenum" title="离线数量"></vxe-table-column>
            </vxe-table>
          </div>
        </Card>
        <Card style="width: 100%;float: left;margin-top: 1%">
          <div style="width: 50%;float: left">
            <device-onlin-sum-line-echart :width="echartWidth1" :height="400" ref="deviceOnlinSumLineEchart"></device-onlin-sum-line-echart>
          </div>
          <div style="width: 50%;float: left;margin-top: 50px">
            <div class="opt-area-02">
              <div class="left-con">
                <div class="input-frame" style="width: 164px">
                  <Select  v-model="params.type" style="width: 164px" placeholder="设备类型" filterable>
                    <Option v-for="item2 in typeList" :value="item2.value" :key="item2.value">{{ item2.label }}</Option>
                  </Select>
                </div>
                <div class="input-frame" style="width: 164px">
                  <Button type="primary" @click="getEquipmentBindPageList" >查询</Button>
                </div>
              </div>
            </div>
            <vxe-table
              style="margin-top: 1%"
              align="center"
              :data="tableData2">
              <vxe-table-column type="seq" title="序号"></vxe-table-column>
              <vxe-table-column field="name" title="设备名称"></vxe-table-column>
              <vxe-table-column field="type" title="设备类型">
                <template v-slot="{ row }">
                  <span v-for="item in typeList" :value="item.value" :key="item.value" v-if="row.type === item.value">{{ item.label }}</span>
                </template>
              </vxe-table-column>
              <vxe-table-column field="state" title="状态">
                <template v-slot="{ row }">
                  <span v-if="row.state === '0'">在线</span>
                  <span v-if="row.state === '1'">离线</span>
                </template>
              </vxe-table-column>
            </vxe-table>
            <Row type="flex" justify="end" class="page_style">
              <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
                    @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
            </Row>
          </div>
        </Card>
      </TabPane>
      <TabPane label="服务配置" name="tab2">
        <Card>
          <div style="width: 100%;margin-top: 1%">
            <div class="opt-area-02">
              <div class="left-con">
                <div class="input-frame" style="width: 164px">
                  <Select  v-model="params.type" style="width: 164px" placeholder="设备类型" filterable>
                    <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </div>
                <div class="input-frame" style="width: 164px">
                  <Button type="primary" style="margin-right: 5px" @click="addEquipment" >新增</Button>
                  <Button type="primary" style="margin-right: 5px" @click="init2">查询</Button>
                </div>
              </div>
            </div>
            <vxe-table
              style="margin-top: 1%"
              align="center"
              :data="tableData1">
              <vxe-table-column type="seq" title="序号"></vxe-table-column>
              <vxe-table-column field="code" title="设备编号"></vxe-table-column>
              <vxe-table-column field="name" title="设备名称"></vxe-table-column>
              <vxe-table-column field="factory" title="设备厂商"></vxe-table-column>
              <vxe-table-column field="type" title="设备类型">
                <template v-slot="{ row }">
                  <span v-for="item in typeList" :value="item.value" :key="item.value" v-if="row.type === item.value">{{ item.label }}</span>
                </template>
              </vxe-table-column>
              <vxe-table-column width="150" title="操作">
                <template v-slot="{ row }">
                  <Button type="primary" @click="setEquipment(row)" >编辑</Button>
                  <Button style="margin-left: 2%" type="primary" @click="delEquipment(row)" >删除</Button>
                </template>
              </vxe-table-column>
            </vxe-table>
            <Row type="flex" justify="end" class="page_style">
              <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
                    @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
            </Row>
          </div>
        </Card>
      </TabPane>
      <TabPane label="服务监控" name="tab3">
        <Card>
          <div style="width: 100%;margin-top: 1%">
            <div class="opt-area-02">
              <div class="left-con">
                <div class="input-frame" style="width: 164px">
                  <div class="input-frame" style="width: 164px">
                    <Select  v-model="params.type" style="width: 164px" placeholder="设备类型" filterable>
                      <Option v-for="item2 in typeList" :value="item2.value" :key="item2.value">{{ item2.label }}</Option>
                    </Select>
                  </div>
                </div>
                <div class="input-frame" style="width: 164px">
                  <Select v-model="params.state"  style="width: 164px" placeholder="设备状态" filterable>
                    <Option value="0">在线</Option>
                    <Option value="1">离线</Option>
                  </Select>
                </div>
                <div class="input-frame" style="width: 164px">
                  <Button type="primary" style="margin-right: 5px" @click="addEquipmentBind" >新增</Button>
                  <Button type="primary" style="margin-right: 5px" @click="init3()">查询</Button>
                </div>
              </div>
            </div>
            <vxe-table
              style="margin-top: 1%"
              align="center"
              :data="tableData2">
              <vxe-table-column type="seq" title="序号"></vxe-table-column>
              <vxe-table-column field="code" title="设备编号"></vxe-table-column>
              <vxe-table-column field="name" title="设备名称"></vxe-table-column>
              <vxe-table-column field="factory" title="设备厂商"></vxe-table-column>
              <vxe-table-column field="type" title="设备类型">
                <template v-slot="{ row }">
                  <span v-for="item in typeList" :value="item.value" :key="item.value" v-if="row.type === item.value">{{ item.label }}</span>
                </template>
              </vxe-table-column>
              <vxe-table-column field="location" title="安装位置"></vxe-table-column>
              <vxe-table-column field="remark" title="备注"></vxe-table-column>
              <vxe-table-column field="state" title="设备状态">
                <template v-slot="{ row }">
                  <span v-if="row.state === '0'">在线</span>
                  <span v-if="row.state === '1'">离线</span>
                </template>
              </vxe-table-column>
              <vxe-table-column width="140" title="操作">
                <template v-slot="{ row }">
                  <Button type="primary" @click="setEquipmentBind(row)" >编辑</Button>
                  <Button style="margin-left: 2%" type="primary" @click="delEquipmentBind(row)" >删除</Button>
                </template>
              </vxe-table-column>
            </vxe-table>
            <Row type="flex" justify="end" class="page_style">
              <Page   show-sizer  show-elevator/>
            </Row>
          </div>
        </Card>
      </TabPane>
      <TabPane label="接口服务" name="tab4">
        <Card>
        <div style="width: 100%;margin-top: 1%">
          <div class="opt-area-02">
            <div class="left-con">
              <div class="input-frame" style="width: 164px">
                <Select  style="width: 164px" placeholder="设备类型" filterable>
                  <Option></Option>
                </Select>
              </div>
              <div class="input-frame" style="width: 164px">
                <Select  style="width: 164px" placeholder="设备状态" filterable>
                  <Option></Option>
                </Select>
              </div>
              <div class="input-frame" style="width: 164px">
                <Button type="primary" style="margin-right: 5px">新增</Button>
                <Button type="primary" style="margin-right: 5px">查询</Button>
              </div>
            </div>
          </div>
          <vxe-table
            style="margin-top: 1%"
            align="center"
            :data="tableData1">
            <vxe-table-column field="first_level_label" title="序号"></vxe-table-column>
            <vxe-table-column field="second_level_label" title="设备厂商"></vxe-table-column>
            <vxe-table-column field="second_level_label" title="设备类型"></vxe-table-column>
            <vxe-table-column field="second_level_label" title="对接方式"></vxe-table-column>
            <vxe-table-column width="100" title="操作">
              <template v-slot="{ row }">
                <Button type="primary" >编辑</Button>
              </template>
            </vxe-table-column>
          </vxe-table>
          <Row type="flex" justify="end" class="page_style">
            <Page   show-sizer  show-elevator/>
          </Row>
        </div>
      </Card>
      </TabPane>
      <TabPane label="数据分析" name="tab5">
        <Card style="width: 100%;float: left">
          <div style="width: 50%;float: left">
            <reliability-analysis-bar-echart :width="echartWidth1" :height="400" ref="reliabilityAnalysisBarEchart"></reliability-analysis-bar-echart>
          </div>
          <div style="width: 50%;float: left">
            <stable-operation-time-bar-echart :width="echartWidth1" :height="400" ref="stableOperationTimeBarEchart"></stable-operation-time-bar-echart>
          </div>
        </Card>

        <Card style="width: 100%;float: left;margin-top: 1%">
          <div style="width: 50%;float: left">
            <proportion-of-manufacturers-pie-echart :width="echartWidth1" :height="400" ref="proportionOfManufacturersPieEchart"></proportion-of-manufacturers-pie-echart>
          </div>
          <div style="width: 50%;float: left">
            <EquipmentTypePieChart :width="echartWidth1" :height="400" ref="equipmentTypePieChart"></EquipmentTypePieChart>
          </div>
        </Card>
      </TabPane>
    </Tabs>
    <Modal v-model="equipmentModal.show" :title="equipmentModal.title" width="360">
      <Form :label-width="80">
        <FormItem label="设备名称" >
          <Input v-model="equipmentModal.data.name" placeholder="请输入设备名称"></Input>
        </FormItem>
        <FormItem label="设备编码" >
          <Input v-model="equipmentModal.data.code" placeholder="请输入设备编码"></Input>
        </FormItem>
        <FormItem label="设备类型">
          <Select  v-model="equipmentModal.data.type"  placeholder="设备类型" filterable>
            <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
          <FormItem label="设备厂商">
            <Input v-model="equipmentModal.data.factory" placeholder="请输入设备厂商"></Input>
          </FormItem>
      </Form>
      <div slot="footer">
        <Button type="warning" @click="equipmentModal.show= false">取消</Button>
        <Button type="info" @click="confirmEquipment(equipmentModal.type)">确定</Button>
      </div>
    </Modal>
    <Modal v-model="equipmentBindModal.show" :title="equipmentBindModal.title" width="360">
      <Form :label-width="80">
        <FormItem label="设备名称" >
          <Select  v-model="equipmentBindModal.data.code" placeholder="设备名称" filterable>
            <Option v-for="item in equipmentList" :value="item.code" :key="item.value">{{ item.name  + '-' + item.code }}</Option>
          </Select>
        </FormItem>
        <FormItem label="安装位置" >
          <Input v-model="equipmentBindModal.data.location" placeholder="请输入安装位置"></Input>
        </FormItem>
        <FormItem label="设备状态">
          <Select  v-model="equipmentBindModal.data.state"  placeholder="设备状态" filterable>
            <Option value="0">在线</Option>
            <Option value="1">离线</Option>
          </Select>
        </FormItem>
          <FormItem label="备注">
            <Input type="textarea" v-model="equipmentBindModal.data.remark" placeholder="请输入备注"></Input>
          </FormItem>
      </Form>
      <div slot="footer">
        <Button type="warning" @click="equipmentBindModal.show= false">取消</Button>
        <Button type="info" @click="confirmEquipmentBind(equipmentBindModal.type)">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import AccessEquipmentSumBarEchart from './components/access-equipment-sum-bar-echart'
import DeviceOnlinSumLineEchart from './components/device-onlin-sum-line-echart'
import ReliabilityAnalysisBarEchart from './components/reliability-analysis-bar-echart'
import StableOperationTimeBarEchart from './components/stable-operation-time-bar-echart'
import ProportionOfManufacturersPieEchart from './components/proportion-of-manufacturers-pie-echart'
import EquipmentTypePieChart from './components/equipment-type-pie-chart'
import { getEquipmentPageList, insertEquipment, updateEquipment, deleteEquipment, getEquipmentBindPageList, insertEquipmentBind, updateEquipmentBind, deleteEquipmentBind, getEquipmentTypeSumList, getEquipmentFactorySumList } from '@/api/eventlist'
// import SelectInfo from '../../grid-sw/components/select-info'

export default {
  name: 'grid-sw-statistics',
  components: {
    AccessEquipmentSumBarEchart,
    DeviceOnlinSumLineEchart,
    ReliabilityAnalysisBarEchart,
    StableOperationTimeBarEchart,
    ProportionOfManufacturersPieEchart,
    EquipmentTypePieChart
  },
  data () {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      equipmentList: [],
      tabValue: 'tab1',
      equipmentModal: {
        title: '',
        type: '',
        show: false,
        data: {}
      },
      equipmentBindModal: {
        title: '',
        type: '',
        show: false,
        data: {}
      },
      typeList: [
        { value: '1', label: '照明设备' },
        { value: '2', label: '消防设备' },
        { value: '3', label: '视频设备' },
        { value: '4', label: '道闸设备' },
        { value: '5', label: '环境监测' }
      ],
      echartWidth1: (document.documentElement.clientWidth - 300) / 2,
      echarData1: [
        // { region: '视频设备', sum: 1 },
        // { region: '照明设备', sum: 2 },
        // { region: '烟感设备', sum: 3 },
        // { region: '环境监测', sum: 4 }
      ],
      tableData1: [],
      tableData2: [],
      echarData2: [
        { date: '2012-07-22', sum: 1 },
        { date: '2012-07-23', sum: 2 },
        { date: '2012-07-24', sum: 3 },
        { date: '2012-07-25', sum: 4 }
      ],
      echarData3: []

    }
  },
  methods: {
    init () {
      // this.$refs.accessEquipmentSumBarEchart.chart(this.echarData1)
      this.$refs.deviceOnlinSumLineEchart.chart(this.echarData2)
      // this.$refs.reliabilityAnalysisBarEchart.chart(this.echarData3)
      // this.$refs.stableOperationTimeBarEchart.chart(this.echarData3)
      // this.$refs.proportionOfManufacturersPieEchart.chart(this.echarData3)
      // this.$refs.equipmentTypePieChart.chart(this.tableData1)
    },
    clickTabs () {
      switch (this.tabValue) {
        case 'tab1':
          this.init1()
          break
        case 'tab2':
          this.init2()
          break
        case 'tab3':
          this.init3()
          break
        case 'tab4':
          break
        case 'tab5':
          this.init5()
          break
      }
    },
    async init5 () {
      await this.getEquipmentTypeSumList()
      this.$refs.equipmentTypePieChart.chart(this.echarData1)
      await this.getEquipmentFactorySumList()
      this.$refs.reliabilityAnalysisBarEchart.chart(this.echarData3)
      this.$refs.stableOperationTimeBarEchart.chart(this.echarData3)
      this.$refs.proportionOfManufacturersPieEchart.chart(this.echarData3)
    },
    async init1 () {
      await this.getEquipmentTypeSumList()
      this.$refs.accessEquipmentSumBarEchart.chart(this.echarData1)
      await this.getEquipmentBindPageList()
    },
    async getEquipmentFactorySumList () {
      await getEquipmentFactorySumList().then(ret => {
        if (ret.data.errcode === 0) {
          this.echarData3 = ret.data.data
        } else {
          this.$Notice.error({ title: '失败！', desc: ret.data.errmsg })
        }
      })
    },
    async  getEquipmentTypeSumList () {
      await getEquipmentTypeSumList().then(ret => {
        if (ret.data.errcode === 0) {
          this.echarData1 = ret.data.data
        } else {
          this.$Notice.error({ title: '失败！', desc: ret.data.errmsg })
        }
      })
    },
    init2 () {
      getEquipmentPageList(this.params).then(ret => {
        if (ret.data.errcode === 0) {
          this.params.totalRecord = ret.data.data.totalRecord
          this.tableData1 = ret.data.data.results
        } else {
          this.$Notice.error({ title: '失败！', desc: ret.data.errmsg })
        }
      })
    },
    getEquipmentList () {
      getEquipmentPageList({ pageSize: 10000 }).then(ret => {
        if (ret.data.errcode === 0) {
          this.equipmentList = ret.data.data.results
        } else {
          this.$Notice.error({ title: '失败！', desc: ret.data.errmsg })
        }
      })
    },
    init3 () {
      this.getEquipmentBindPageList()
    },
    getEquipmentBindPageList () {
      getEquipmentBindPageList(this.params).then(ret => {
        if (ret.data.errcode === 0) {
          this.params.totalRecord = ret.data.data.totalRecord
          this.tableData2 = ret.data.data.results
        } else {
          this.$Notice.error({ title: '失败！', desc: ret.data.errmsg })
        }
      })
    },
    addEquipment () {
      this.equipmentModal.type = '1'
      this.equipmentModal.data = {}
      this.equipmentModal.title = '新增设备'
      this.equipmentModal.show = true
    },
    addEquipmentBind () {
      this.equipmentBindModal.type = '1'
      this.equipmentBindModal.data = {}
      this.equipmentBindModal.title = '新增'
      this.getEquipmentList()
      this.equipmentBindModal.show = true
    },
    setEquipment (e) {
      this.equipmentModal.type = '2'
      this.equipmentModal.data = e
      this.equipmentModal.title = '修改设备'
      this.equipmentModal.show = true
    },
    setEquipmentBind (e) {
      this.equipmentBindModal.type = '2'
      this.equipmentBindModal.data = e
      this.equipmentBindModal.title = '修改'
      this.equipmentBindModal.show = true
    },
    delEquipment (e) {
      deleteEquipment(e).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '操作成功!', desc: ret.data.errmsg })
          this.init2()
          this.equipmentModal.show = false
        } else {
          this.$Notice.error({ title: '操作失败!', desc: ret.data.errmsg })
        }
      })
    },
    delEquipmentBind (e) {
      deleteEquipmentBind(e).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '操作成功!', desc: ret.data.errmsg })
          this.init3()
          this.equipmentBindModal.show = false
        } else {
          this.$Notice.error({ title: '操作失败!', desc: ret.data.errmsg })
        }
      })
    },
    confirmEquipment (type) {
      if (type === '1') {
        insertEquipment(this.equipmentModal.data).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Notice.success({ title: '操作成功!', desc: ret.data.errmsg })
            this.init2()
            this.equipmentModal.show = false
          } else {
            this.$Notice.error({ title: '操作失败!', desc: ret.data.errmsg })
          }
        })
      }
      if (type === '2') {
        updateEquipment(this.equipmentModal.data).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Notice.success({ title: '操作成功!', desc: ret.data.errmsg })
            this.init2()
            this.equipmentModal.show = false
          } else {
            this.$Notice.error({ title: '操作失败!', desc: ret.data.errmsg })
          }
        })
      }
    },
    confirmEquipmentBind (type) {
      if (type === '1') {
        insertEquipmentBind(this.equipmentBindModal.data).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Notice.success({ title: '操作成功!', desc: ret.data.errmsg })
            this.init3()
            this.equipmentBindModal.show = false
          } else {
            this.$Notice.error({ title: '操作失败!', desc: ret.data.errmsg })
          }
        })
      }
      if (type === '2') {
        updateEquipmentBind(this.equipmentBindModal.data).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Notice.success({ title: '操作成功!', desc: ret.data.errmsg })
            this.init3()
            this.equipmentBindModal.show = false
          } else {
            this.$Notice.error({ title: '操作失败!', desc: ret.data.errmsg })
          }
        })
      }
    },
    pageAction (page) {
      this.params.pageNo = page
      this.clickTabs()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.clickTabs(this.params.pageNo)
    }
  },
  mounted () {
    this.init()
    this.clickTabs()
    this.severUserInfo = this.$store.state.user.severUserInfo
  }
}
</script>

<style scoped>
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}
.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}
.page_style {
  margin: 60px 20px;
}
</style>
